<template>
	<view class="recommend-container">
		<!-- 顶部背景 -->
		<view class="top-bg">
			<image src="http://xlnc.oss-cn-shenzhen.aliyuncs.com/uploads/1745920433448.png" mode="aspectFill"></image>
		</view>

		<!-- 主要内容 -->
		<view class="content-box">
			<!-- 推荐人信息 -->
			<view class="info-card recommender-info">
				<view class="card-title">
					<text>我的红娘</text>
				</view>
				<view class="info-content" v-if="recommendInfo.recommender_id > 0">
					<image class="avatar" :src="recommenderInfo.avatar" mode="aspectFill"></image>
					<view class="info-text">
						<text class="name">{{ recommenderInfo.nickname }}</text>
						<text class="tip">感谢TA的推荐</text>
					</view>
				</view>
				<view class="empty-tip" v-else>
					<text>您还没有推荐人</text>
				</view>
			</view>

			<!-- 我的推荐二维码部分修改为 -->
			<view class="info-card qrcode-card">
				<view class="card-title">
					<text>我的推荐码</text>
				</view>

				<!-- 修改二维码部分 -->
				<view class="qrcode-content">
					<view class="qrcode-wrapper">
						<image class="qrcode-img" :src="recommendInfo.referrerimgurl || defaultQrcode" mode="aspectFit">
						</image>
						<image class="company-logo"
							src="http://xlnc.oss-cn-shenzhen.aliyuncs.com/uploads/logo.png" mode="aspectFit">
						</image>
					</view>
					<text class="qrcode-tip">扫描二维码成为我的推荐用户</text>
				</view>
			</view>

			<!-- 修改推荐统计部分 -->
			<view class="info-card stats-card">
				<view class="card-title">
					<text>推荐统计 ({{ recommendInfo.recommend_count }})</text>
				</view>
				<view class="stats-content">
					<scroll-view scroll-x="true" class="user-scroll">
						<view class="user-list">
							<view class="user-item" v-for="(user, index) in recommendInfo.recommended_users"
								:key="index">
								<image class="user-avatar" :src="user.avatar" mode="aspectFill">
								</image>
								<text class="user-name">{{ user.nickname }}</text>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<!-- 推荐规则 -->
			<view class="info-card rules-card">
				<view class="card-title">
					<text>推荐规则</text>
				</view>
				<view class="rules-content">
					<view class="rule-item" v-for="(item, index) in rules" :key="index">
						<text class="rule-index">{{ index + 1 }}.</text>
						<text class="rule-text">{{ item }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {},
			recommendInfo: {
				recommender_id: 0,
				recommend_count: 0,
				referrerimgurl: '',
				recommended_users: [] // 新增推荐用户列表

			},
			recommenderInfo: {
				nickname: '',
				avatar: ''
			},
			rules: [
				'每成功推荐1位用户注册，推荐人数+1',
				'被推荐用户每次消费，您可获得消费金额的90%作为奖励',
				'奖励存到余额，可随时申请提现'
			],
			defaultQrcode: 'http://xlnc.oss-cn-shenzhen.aliyuncs.com/uploads/1745919528460.png', // 默认占位图
		}
	},
	onLoad() {
		this.getUserInfo();
		this.getRecommendInfo();
	},
	methods: {
		// 保存二维码到相册// 在saveQrcode方法中也需要修改
		saveQrcode() {
			if (!this.userInfo.referrerimgurl) {  // 修改这里
				uni.showToast({
					title: '暂无二维码可保存',
					icon: 'none'
				});
				return;
			}

			uni.downloadFile({
				url: this.userInfo.referrerimgurl,  // 修改这里
				success: (res) => {
					if (res.statusCode === 200) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title: '保存成功',
									icon: 'success'
								});
							},
							fail: () => {
								uni.showToast({
									title: '保存失败',
									icon: 'none'
								});
							}
						});
					}
				},
				fail: () => {
					uni.showToast({
						title: '下载二维码失败',
						icon: 'none'
					});
				}
			});
		},
		async getUserInfo() {
			const launch = uni.getStorageSync('my_info');
			const res = await this.$myRuquest({
				url: '/index/dsnv.activities/myinfo2',
				data: {
					"id": launch.id,
				},
			});
			if (res.data.code == 200) {
				this.userInfo = res.data.data;
				// console.log(this.userInfo)
			}
		},
		async getRecommendInfo() {
			const launch = uni.getStorageSync('my_info');
			const res = await this.$myRuquest({
				url: '/index/api/getRecommendInfo',
				data: {
					"user_id": launch.id,
				},
			});

			if (res.data.code == 200) {
				this.recommendInfo = res.data.data;

				// 如果有推荐人，获取推荐人信息
				if (this.recommendInfo.recommender_id > 0) {
					this.getRecommenderInfo();
				}
			}
		},
		async getRecommenderInfo() {
			const res = await this.$myRuquest({
				url: '/index/api/myinfo',
				data: {
					"id": this.recommendInfo.recommender_id,
				},
			});
			if (res.data.code == 200) {
				this.recommenderInfo = res.data.data;
			}
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #f7f7f7;
}

.recommend-container {
	.top-bg {
		height: 200rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.content-box {
		padding: 0 30rpx;
		margin-top: -60rpx;
		position: relative;
		z-index: 2;
	}

	.info-card {
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.card-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 30rpx;
			position: relative;
			padding-left: 20rpx;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 8rpx;
				height: 30rpx;
				background-color: #eb1a8c;
				border-radius: 4rpx;
			}
		}
	}

	.recommender-info {
		.info-content {
			display: flex;
			align-items: center;

			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.info-text {
				display: flex;
				flex-direction: column;

				.name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 10rpx;
				}

				.tip {
					font-size: 24rpx;
					color: #999;
				}
			}
		}

		.empty-tip {
			font-size: 28rpx;
			color: #999;
			text-align: center;
			padding: 30rpx 0;
		}
	}

	.qrcode-card {
		.qrcode-content {
			display: flex;
			flex-direction: column;
			align-items: center;

			.qrcode-img {
				width: 300rpx;
				height: 300rpx;
				margin: 20rpx 0;
				border: 1rpx solid #eee;
			}

			.qrcode-tip {
				font-size: 26rpx;
				color: #666;
				text-align: center;
			}
		}
	}

	.stats-card {
		.stats-content {
			display: flex;
			justify-content: space-around;
			text-align: center;

			.stat-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.stat-number {
					font-size: 40rpx;
					font-weight: bold;
					color: #eb1a8c;
					margin-bottom: 10rpx;
				}

				.stat-label {
					font-size: 26rpx;
					color: #666;
				}
			}
		}
	}

	.rules-card {
		.rules-content {
			.rule-item {
				display: flex;
				margin-bottom: 20rpx;

				.rule-index {
					color: #eb1a8c;
					margin-right: 10rpx;
				}

				.rule-text {
					font-size: 26rpx;
					color: #666;
					flex: 1;
				}
			}
		}
	}
}

.stats-card {
	.stats-content {
		padding: 20rpx 0;

		.user-scroll {
			width: 100%;
			white-space: nowrap;

			.user-list {
				display: inline-flex;

				.user-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-right: 30rpx;

					.user-avatar {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						margin-bottom: 10rpx;
					}

					.user-name {
						font-size: 24rpx;
						color: #666;
						max-width: 100rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
	}
}
.qrcode-card {
  .qrcode-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .qrcode-wrapper {
      position: relative;
      width: 400rpx;
      height: 400rpx;
      margin: 20rpx 0;
      
      .qrcode-img {
        width: 100%;
        height: 100%;
        border: 1rpx solid #eee;
      }
      
      .company-logo {
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 75rpx;
        height: 70rpx;
        background-color: #fff;
        padding: 0rpx;
        border-radius: 5rpx;
        box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
      }
    }

    .qrcode-tip {
      font-size: 26rpx;
      color: #666;
      text-align: center;
    }
  }
}
</style>